<template class='home-head'>
  <van-nav-bar fixed :border="false">
    <!-- 左边图标 -->
    <div class="left" slot="left">
      <van-image
        style="vertical-align: middle;"
        :src="logo"
        width="40px"
        height="40px"
        round
        fit="scale-down"
      ></van-image>
    </div>
    <div slot="title">
      <van-search
        @click="handleTitle"
        shape="round"
        background="transparent"
        input-align="center"
        placeholder="请输入搜索关键词"
        disabled
      >
        <van-icon slot="left-icon" name="search" />
      </van-search>
    </div>
    <!-- 右边图标 -->
    <div class="right" slot="right">
      <van-icon
        @click="rightClicked"
        name="ellipsis"
        color="#000"
        size="32px"
        style="line-height: 42px"
      />
    </div>
  </van-nav-bar>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Vue from "vue";
import { NavBar, Icon, Image } from "vant";
Vue.use(NavBar)
  .use(Icon)
  .use(Image);

export default {
  data() {
    return {
      logo: require("@/assets/song.svg")
    };
  },
  methods: {
    ...mapMutations("overlayModule", ["CHANGESLIDER"]),
    rightClicked() {
      this.CHANGESLIDER();
    },
    handleTitle() {
      this.$router.push({
        name: "Search"
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.van-nav-bar {
  background-color: transparent !important;
  .van-icon {
    color: inherit !important;
  }
}
</style>
